<template>
  <view class="detail">
    <!-- 用户信息 开始 -->
    <view class="user_wrap">
      <view class="user_avatar">
        <image :src="imgDetail.user.avatar" mode="widthFix"></image>
      </view>
      <view class="user_info">
        <view class="user_name">
          {{ imgDetail.user.name }}
        </view>
        <view class="create_time">
          {{ imgDetail.createTime }}
        </view>
      </view>
    </view>
    <!-- 用户信息 结束 -->

    <!-- 高清大图开始 -->
    <view
      class="big_bg"
      @click="previewImage($event)"
      :data-url="imgDetail.thumb"
    >
      <swiper-action @swiperAction="handleSwiperAction">
        <image mode="widthFix" :src="imgDetail.thumb"></image>
      </swiper-action>
    </view>
    <!-- 高清大图结束 -->

    <!-- 点赞开始 -->
    <view class="user_rank">
      <view class="rank" @click="handleRank">
        <text class="iconfont" :class="rank ? 'icon-dz' : 'icon-zansel'">
          {{ imgDetail.rank }}</text
        >
      </view>
      <view class="user_collect" @click="collectImg">
        <text
          class="iconfont"
          :class="collected ? 'icon-aixin-copy' : 'iconshoucang'"
        >
          收藏</text
        >
      </view>
    </view>
    <!-- 点赞结束 -->

    <!-- 相关专辑开始 -->
    <view class="img_album_wrap" v-if="album.length != 0">
      <view class="title">
        相关
      </view>
      <view class="album_info" v-for="item in album" :key="item.id">
        <view class="album_img"
          ><image mode="aspectFill" :src="item.cover"></image>
        </view>
        <view class="album_name">
          <view class="album_tap">
            <text>专辑</text>
          </view>
          <navigator
            :url="`/pages/album/index?id=${item.id}`"
            class="album_title"
          >
            <view class="name">{{ item.name }} </view>
            <view class="jiantou">
              〉
            </view>
          </navigator>
        </view>
      </view>
    </view>
    <view class="no" v-else>
      <view class="no_title">
        相关
      </view>
      <view class="no_content">
        没有相关的专辑...
      </view>
    </view>
    <!-- 相关专辑结束 -->

    <!-- 最热评论 -->
    <view class="comment hot" v-if="hots.length">
      <view class="comment_title">
        <text class="iconfont iconhot1"></text>
        <text class="comment_text">最热评论</text>
      </view>
      <view class="comment_list">
        <view class="comment_item" v-for="item in hots" :key="item.id">
          <!-- 用户信息 -->
          <view class="comment_user">
            <!-- 用户头像 -->
            <view class="user_icon">
              <image mode="widthFix" :src="item.user.avatar"></image>
            </view>
            <!-- 用户名称 -->
            <view class="user_name">
              <view class="user_nickname">{{ item.user.name }}</view>
              <view class="user_time">{{ item.cnTime }}</view>
            </view>
            <!-- 用户徽章 -->
            <view class="user_badge">
              <image
                v-for="item2 in item.user.title"
                :key="item2.icon"
                :src="item2.icon"
              ></image>
            </view>
          </view>
          <!-- 评论数据 -->
          <view class="comment_desc">
            <view class="comment_content">{{ item.content }}</view>
            <view class="comment_like">
              <text class="iconfont icon-zansel">{{ item.size }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 最热评论end -->

    <!-- 最新评论 -->
    <view class="comment new" v-if="recommends.length">
      <view class="comment_title">
        <text class="iconfont iconpinglun"></text>
        <text class="comment_text">最新评论</text>
      </view>
      <view class="comment_list">
        <view class="comment_item" v-for="item in recommends" :key="item.id">
          <!-- 用户信息 -->
          <view class="comment_user">
            <!-- 用户头像 -->
            <view class="user_icon">
              <image mode="widthFix" :src="item.user.avatar"></image>
            </view>
            <!-- 用户名称 -->
            <view class="user_name">
              <view class="user_nickname">{{ item.user.name }}</view>
              <view class="user_time">{{ item.cnTime }}</view>
            </view>
            <!-- 用户徽章 -->
            <view class="user_badge">
              <image
                v-for="item2 in item.user.title"
                :key="item2.icon"
                :src="item2.icon"
              ></image>
            </view>
          </view>
          <!-- 评论数据 -->
          <view class="comment_desc">
            <view class="comment_content">{{ item.content }}</view>
            <view class="comment_like">
              <text class="iconfont icon-zansel">{{ item.size }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 最新评论 -->

    <!-- 下载按钮 -->
    <view class="download" @click="handleDownLoad">
      <view class="download_btn">
        下载图片
      </view>
    </view>
    <!-- 下载按钮 -->
  </view>
</template>

<script>
import swiperAction from "@/components/swiperAction.vue";
import moment from "moment";
moment.locale("zh-cn");
export default {
  components: {
    swiperAction,
  },
  data() {
    return {
      //用户图片详情数据
      imgDetail: {},
      collected: false,
      rank: false,
      //相关专辑数组
      album: [],
      //最热评论
      hots: [],
      //最新评论
      recommends: [],
      // 图片的索引
      imgIndex: 0,
    };
  },
  onLoad() {
    // console.log(getApp().globalData);
    //获取全局中的数据

    const { imgIndex } = getApp().globalData;

    this.imgIndex = imgIndex;
    this.getData();
  },
  methods: {
    //给当前页面赋值
    getData() {
      const { imgList } = getApp().globalData;
      //给data中的imgDetail赋值
      this.imgDetail = imgList[this.imgIndex];
      console.log(this.imgDetail);
      //格式化时间戳
      this.imgDetail.createTime = moment(this.imgDetail.atime * 1000).fromNow();
      //获取缓存中的收藏数据
      const collects = uni.getStorageSync("collects") || [];
      //判断缓存中是否有该条数据
      const index = collects.findIndex((v) => v.id === this.imgDetail.id);
      if (index != -1) {
        //存在该条数据，把收藏爱心变红
        this.collected = true;
      } else {
        this.collected = false;
      }
      //获取缓存中的点赞数据
      const rankList = uni.getStorageSync("rankList") || [];
      const index2 = rankList.findIndex((v) => v.id === this.imgDetail.id);
      if (index2 != -1) {
        this.imgDetail.rank = rankList[index2].rank;
        this.rank = true;
      } else {
        this.rank = false;
      }
      //获取评论信息
      this.getComments(this.imgDetail.id);
    },
    //获取评论信息
    getComments(id) {
      this.request({
        url: `http://157.122.54.189:9088/image/v2/wallpaper/wallpaper/${id}/comment`,
      }).then((res) => {
        console.log(res);
        this.album = res.res.album;
        // 给hot数组中的对象添加一个时间属性 xxx月前
        res.res.hot.forEach(
          (v) => (v.cnTime = moment(v.atime * 1000).fromNow())
        );
        res.res.comment.forEach(
          (v) => (v.cnTime = moment(v.atime * 1000).fromNow())
        );
        this.hots = res.res.hot;
        this.recommends = res.res.comment;
      });
    },
    //点击收藏触发
    collectImg() {
      //1.判断是收藏还是取消收藏
      //2.收藏时把爱心变红，并把该条数据存储到缓存中去，
      //3.取消收藏，把爱心恢复，把缓存中该条数据删除

      //获取缓存中的数据
      const collects = uni.getStorageSync("collects") || [];
      if (this.collected) {
        //如果collected是true，点击之后就是取消收藏操作
        //把collected取反
        this.collected = !this.collected;
        //把缓存中的数据删除
        const index = collects.findIndex((v) => v.id == this.imgDetail.id);
        uni.showToast({
          title: "取消收藏",
          icon: "success",
          duration: 1000,
          mask: true,
        });
        if (index != -1) {
          collects.splice(index, 1);
          //删除数据
        }
      } else {
        //点击时collected为false，证明是收藏操作
        //把collected取反
        this.collected = !this.collected;
        //把该条数据存储到缓存中
        collects.push(this.imgDetail)
        uni.showToast({
          title: "收藏成功",
          icon: "success",
          duration: 1000,
          mask: true,
        });
      }
      console.log(collects);
      //把数据存回缓存
      wx.setStorageSync("collects", collects);
    },
    //点赞触发事件
    handleRank() {
      //获取缓存中的点赞数据
      let rankList = wx.getStorageSync("rankList") || [];
      if (this.rank) {
        //点击的时候rank是true，取消点赞操作
        //把rank取反
        this.rank = !this.rank;
        //点赞数-1
        this.imgDetail.rank = parseInt(this.imgDetail.rank) - 1;
        wx.showToast({
          title: "(ಥ﹏ಥ)我们会做的更好的!",
          icon: "none",
          duration: 1000,
          mask: true,
        });
        const index = rankList.findIndex((v) => v.id === this.imgDetail.id);
        if (index != -1) {
          rankList.splice(index, 1);
        }
      } else {
        //点击的时候rank是false，点赞操作
        //把rank取反
        this.rank = !this.rank;
        //点赞数+1
        this.imgDetail.rank = parseInt(this.imgDetail.rank) + 1;
        rankList.push(this.imgDetail);
        wx.showToast({
          title: "(*^▽^*)感谢您的支持!",
          icon: "none",
          duration: 1000,
          mask: true,
        });
      }
      wx.setStorageSync("rankList", rankList);
    },
    previewImage(e) {
      // console.log('预览')
      //接收点击的的图片路径
      const current = e.currentTarget.dataset.url;
      //先构造要预览的图片数组
      const urls = [this.imgDetail.thumb];
      wx.previewImage({
        current,
        urls,
      });
    },
    //切换下一页
    handleSwiperAction(e) {
      /* 
     1 用户 左滑 imgIndex++  
     2 用户 右滑 imgIndex-- 
     3 判断 数组是否越界问题！！
     4 左滑 e.direction==="left"&&this.imgIndex<imgList.length-1 
     5 右滑 e.direction==="right"&&this.imgIndex>0
      */
      const { imgList } = getApp().globalData;
      if (e.direction === "left" && this.imgIndex < imgList.length - 1) {
        //  可以进行 左滑 加载下一页
        this.imgIndex++;
        this.getData();
      } else if (e.direction === "right" && this.imgIndex > 0) {
        // 右滑 加载上一页
        this.imgIndex--;
        this.getData();
      } else {
        uni.showToast({
          title: "没有数据了",
          icon: "none",
        });
      }
    },
    //下载图片
    async handleDownLoad() {
      // uni.downloadFile
      // uni.saveImageToPhotosAlbum

      await uni.showLoading({
        title: "下载中",
      });

      // 1 将远程文件下载到小程序的内存中 tempFilePath
      const result1 = await uni.downloadFile({ url: this.imgDetail.img });
      const { tempFilePath } = result1[1];

      //  2 将小程序内存中的临时文件下载到本地上
      const result2 = await uni.saveImageToPhotosAlbum({
        filePath: tempFilePath,
      });
      // console.log(result2);
      // 3 提示用户下载成功

      uni.hideLoading();
      await uni.showToast({
        title: "下载成功",
        // icon
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.detail {
  .user_wrap {
    display: flex;
    padding: 20rpx;
    .user_avatar {
      padding: 0 20rpx;
      image {
        width: 88rpx;
        border-radius: 50%;
      }
    }

    .user_info {
      .user_name {
        color: #000;
        font-weight: 600;
      }

      .create_time {
        padding: 10rpx 0;
        color: #ccc;
      }
    }
  }
  .big_bg {
    border-bottom: 2rpx solid #ccc;
  }
  .user_rank {
    height: 88rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    // padding: 20rpx 100rpx;
    border-bottom: 2px solid #eee;
    .rank {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      text {
      }
    }
    .user_collect {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      text {
      }
    }
  }
  .img_album_wrap {
    padding-bottom: 10rpx;
    border-bottom: 2px solid #ccc;
    .title {
      padding: 30rpx 10rpx;
    }

    .album_info {
      display: flex;
      padding: 10rpx;
      .album_img {
        flex: 1;
        image {
          width: 180rpx;
          height: 180rpx;
        }
      }

      .album_name {
        flex: 3;
        display: flex;
        flex-direction: column;

        .album_tap {
          color: #fff;
          margin-left: 20rpx;
          margin-top: 10rpx;
          text {
            background-color: #d4237a;
            padding: 10rpx 20rpx;
            border-radius: 16rpx;
          }
        }

        .album_title {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 28rpx 30rpx;
          margin-top: 8rpx;
          .name {
            color: #000;
            font-size: 30rpx;
          }

          .jiantou {
            color: #888089;
            font-size: 36rpx;
            font-weight: 600;
          }
        }
      }
    }
  }
  .no {
    border-bottom: 2px solid #ccc;
    padding-bottom: 20rpx;
    color: #ccc;
    .no_title {
      padding: 20rpx;
    }
    .no_content {
      text-align: center;
    }
  }
  // 最热评论
  .comment {
    .comment_title {
      padding: 15rpx;
      .iconfont {
        color: red;
        font-size: 40rpx;
      }

      .comment_text {
        font-weight: 600;
        font-size: 28rpx;
        color: #666;
        margin-left: 10rpx;
      }
    }

    .comment_list {
      .comment_item {
        border-bottom: 5rpx solid #eee;
        // 用户信息
        .comment_user {
          display: flex;
          padding: 20rpx 0;
          .user_icon {
            width: 15%;
            display: flex;
            justify-content: center;
            align-items: center;
            image {
              width: 90%;
            }
          }

          .user_name {
            flex: 1;
            .user_nickname {
              color: #777;
            }

            .user_time {
              color: #ccc;
              font-size: 24rpx;
              padding: 5rpx;
            }
          }

          .user_badge {
            image {
              width: 40rpx;
              height: 40rpx;
              display: inline-block;
            }
          }
        }
      }
    }
    // 评论数据
    .comment_desc {
      display: flex;
      padding: 30rpx 0;
      .comment_content {
        flex: 1;
        padding-left: 15%;
        color: #000;
      }

      .comment_like {
        text-align: right;
        .icon-zansel {
        }
      }
    }
  }
  // 最新评论
  .new {
    .iconpinglun {
      color: aqua !important;
    }
  }
  .download {
    background-color: #d4237a;
    display: flex;
    justify-content: center;
    align-items: start;
    color: #fff;
    font-weight: 600;
    padding: 16rpx 0;
    width: 90%;
    margin: 0 auto;
    .download_btn {
    }
  }
}
</style>
